<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      row-key="id"
      title="列表"
      :columns="columns"
      :request-api="loadTable"
      highlight-current-row
      @selection-change="handleSelectionChange">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <ElButton type="primary" :icon="EditPen" @click="onBatchClicked">批量修改</ElButton>
        <ElButton type="primary" :icon="Upload" @click="onAddClicked">上传</ElButton>
      </template>
      <!-- 账户操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
        <ElButton type="warning" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
        <ElButton type="danger" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
      </template>
    </ProTable>
    <EducationViewForm ref="formRef" @success="refresh" />
  </div>
</template>

<script setup lang="ts" name="ZLEducationView">
import { Upload, Delete, EditPen, View } from '@element-plus/icons-vue'
import EducationViewForm from './education-room-form.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive, onMounted } from 'vue'
import { EducationView, pageEducationView, removeEducationView } from '@api/tby/education/educationView'
import { ElMessage, ElMessageBox } from 'element-plus'
import { FormType } from '@/enums'
import { dateFormat } from '@api/tby/common/common'
import { EducationRoom, listEducationRoom } from '@api/tby/education/educationRoom'

const proTableRef = ref<ProTableInstance>()
const currentCategory = ref('XJG')
const selectData = ref<OptionType[]>([])

function refresh() {
  proTableRef.value?.getTableList()
}

// 表格列
const columns = reactive<ColumnProps<EducationView.Record>[]>([
  { type: 'selection', width: 60 },
  {
    prop: 'businessId',
    label: '宣教馆',
    enum: selectData,
    search: { el: 'select', key: 'businessId', order: 3 }
  },
  { prop: 'fileName', label: '名称', align: 'center', minWidth: 200 },
  {
    prop: 'type',
    label: '类型',
    enum: EducationView.TypeEnum,
    tag: true,
    search: { el: 'select', key: 'type', order: 1 }
  },
  {
    prop: 'createDateFormat',
    label: '上传时间',
    search: { el: 'date-picker', key: 'createTime', props: { type: 'datetimerange' }, order: 2 },
    align: 'center',
    minWidth: 200
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
])

const loadTable = (query: EducationView.Query) => {
  query.category = currentCategory.value
  query.order = 'v.create_time desc'
  if (query.createTime) {
    query.createTimeBegin = dateFormat(query.createTime[0].getTime(), 'yyyy-MM-dd HH:mm:ss')
    query.createTimeEnd = dateFormat(query.createTime[1], 'yyyy-MM-dd HH:mm:ss')
    query.createTime = undefined
  }
  return pageEducationView(query)
}

const multipleSelection = ref<EducationView.Record[]>([])
const handleSelectionChange = (val: EducationView.Record[]) => {
  multipleSelection.value = val
}

const formRef = ref<InstanceType<typeof EducationViewForm> | null>(null)

// 批量修改
const onBatchClicked = () => {
  let idArray: number[] = multipleSelection.value.map(item => {
    return item.id
  })
  if (idArray.length === 0) {
    ElMessage({
      type: 'error',
      message: '请选择要修改的数据!'
    })
    return
  }
  formRef.value?.openBatch(idArray.join(','))
}

// 添加
const onAddClicked = () => {
  formRef.value?.open(FormType.ADD)
}

// 修改
const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 查看用户
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, row.id)
}

// 删除
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('是否删除数据?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    removeEducationView(row.id).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      proTableRef.value?.getTableList()
    })
  })
}

defineExpose({
  refresh
})

onMounted(async () => {
  selectData.value = []
  let query: EducationRoom.Query = { current: 1, size: 10000 }
  listEducationRoom(query).then(({ data }) => {
    data.forEach(item => {
      selectData.value.push({
        value: item.id,
        label: item.name
      })
    })
  })
})
</script>
